// createRef是一个方法, 执行以后会返回一个内存的地址
import React, { Component, createRef } from "react";

class App extends Component {
  // constructor() {
  //   super();
  //   // 有一个ipt的复杂类型的变量，指向了那个地址
  //   this.ipt = createRef();
  // }

  // createRef可以多次调用，会指向不同的地方
  ipt = createRef();
  ipt2 = createRef();

  handleClick() {
    console.log(this.ipt.current.value);
    console.log(this.ipt2.current.value);
  }

  render() {
    return (
      <>
        <h2>非受控组件</h2>
        {/* 让input也指向了那块地址 */}
        {/* 非受控组件就是交由react去控制的表单元素 */}
        {/* 一般情况下我们使用受控组件，只有当文件上传的时候使用非受控组件 */}

        {/* defaultValue可以作为非受控组件的初始值 */}
        <input type="text" ref={this.ipt} defaultValue="abc" />
        <input type="text" ref={this.ipt2} />
        <button onClick={this.handleClick.bind(this)}>btn</button>
      </>
    );
  }
}

export default App;
